<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>First programs in wxWidgets</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="wxWidgets, tutorial, First programs, C++, programming, GUI, multiplatform">
<meta name="description" content="In this part of the wxWidgets tutorial we create first programs in wxWidgets">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>First programs in wxWidgets</h1>


<p>
In this chapter, we will cover the basics needed to create wxWidgets applications. 
We will create our first simple example, show how to display an icon. 
Next we will create a simple example demonstrating
usage of an event. Finally, we will see, how widgets communicate in wxWidgets applications.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 


<h2>A simple application</h2>

<p>
First we create the very basic wxWidgets program. 
</p>

<div class="codehead">simple.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Simple : public wxFrame
{
public:
    Simple(const wxString&amp; title);

};
</pre>

<div class="codehead">simple.cpp</div>
<pre class="code">
#include "simple.h"

Simple::Simple(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150))
{
  Centre();
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "simple.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{
    Simple *simple = new Simple(wxT("Simple"));
    simple->Show(true);

    return true;
}
</pre>

<p>
This very basic example shows a small window on the screen. The window is centered.
</p>

<pre class="explanation">
Centre();
</pre>

<p>
This method centers the window on the screen. Both horizontally and vertically. 
</p>

<pre class="explanation">
IMPLEMENT_APP(MyApp)
</pre>

<p>
The code that implements the application is hidden behind this macro. This is copy and paste
code, we usually don't have to care about.
</p>

<p>
To compile the example, run the following command. (On Unix).
</p>

<pre>
g++ main.cpp main.h simple.cpp simple.h  `wx-config --cxxflags --libs` -o simple
</pre>

<img src="/img/gui/wxwidgets/simple.png" alt="Simple">
<div class="figure">Figure: Simple</div>


<h2>Application icon</h2>

<p>
In this example, we provide an icon for our application. 
It became a standard to display a small icon in the upper 
left corner of the window. The icon is a graphical identity of the program. 
</p>

<div class="codehead">icon.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Icon : public wxFrame
{
public:
    Icon(const wxString&amp; title);

};
</pre>

<div class="codehead">icon.cpp</div>
<pre class="code">
#include "icon.h"

Icon::Icon(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150))
{
  SetIcon(wxIcon(wxT("web.xpm")));
  Centre();
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};

</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "icon.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{
    Icon *icon = new Icon(wxT("Icon"));
    icon->Show(true);

    return true;
}
</pre>

<p>
In our example we show a small web icon. 
</p>


<pre class="explanation">
SetIcon(wxIcon(wxT("web.xpm")));
</pre>

<p>
To display an application icon is a matter of one code line.
XPM (X PixMap) is an ASCII image format.
</p>

<img src="/img/gui/wxwidgets/icon.png" alt="Icon">
<div class="figure">Figure: Icon</div>


<h2>A simple button</h2>

<p>
In the following example, we create a button on the frame widget. 
We will show, how to create a simple event
handler.
</p>

<div class="codehead">button.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class Button : public wxFrame
{
public:
    Button(const wxString&amp; title);

    void OnQuit(wxCommandEvent &amp; event);
};
</pre>

<div class="codehead">button.cpp</div>
<pre class="code">
#include "button.h"

Button::Button(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(270, 150))
{
  wxPanel *panel = new wxPanel(this, wxID_ANY);

  wxButton *button = new wxButton(panel, wxID_EXIT, wxT("Quit"), 
      wxPoint(20, 20));
  Connect(wxID_EXIT, wxEVT_COMMAND_BUTTON_CLICKED, 
      wxCommandEventHandler(Button::OnQuit));
  button->SetFocus();
  Centre();
}

void Button::OnQuit(wxCommandEvent &amp; WXUNUSED(event))
{
    Close(true);
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "button.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Button *btnapp = new Button(wxT("Button"));
    btnapp->Show(true);

    return true;
}
</pre>


<pre class="explanation">
wxPanel *panel = new wxPanel(this, wxID_ANY);
</pre>

<p>
First we create a <i>wxPanel</i> widget. It will be placed inside a <i>wxFrame</i> widget.
</p>

<pre class="explanation">
wxButton *button = new wxButton(panel, wxID_EXIT, wxT("Quit"), wxPoint(20, 20));
</pre>

<p>
We create a <i>wxButton</i> widget. It is placed on the panel. We use 
the predefined <i>wxID_EXIT</i> id for the button.
It will cause to display a small exit icon on the button. The label of 
the button is "Quit". The button is positioned
manually at x=20, y=20 coordinates. The beginning of the coordinate 
system is at the upper left hand corner.
</p>

<pre class="explanation">
Connect(wxID_EXIT, wxEVT_COMMAND_BUTTON_CLICKED, 
    wxCommandEventHandler(Button::OnQuit));
</pre>

<p>
If we click on the button, a <i>wxEVT_COMMAND_BUTTON_CLICKED</i> event is 
generated. We connect the event to the <i>OnQuit()</i> method of the 
Button class. So when we click on the button, the OnQuit() method is called.
</p>

<pre class="explanation">
button->SetFocus();
</pre>

<p>
We set the keyboard focus to the button. So if we press the enter key, the button is being clicked.
</p>

<pre class="explanation">
Close(true);
</pre>

<p>
Inside the OnQuit() method, we call the <i>Close()</i> method. This will terminate our application.
</p>

<img src="/img/gui/wxwidgets/button.png" alt="Button">
<div class="figure">Figure: Button</div>


<h2>Widgets communicate</h2>

<p>
It is important to know, how widgets can communicate in application. Follow the next example.
</p>


<div class="codehead">Panels.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;
#include &lt;wx/panel.h&gt;

class LeftPanel : public wxPanel
{
public:
    LeftPanel(wxPanel *parent);

    void OnPlus(wxCommandEvent &amp; event);
    void OnMinus(wxCommandEvent &amp; event);

    wxButton *m_plus;
    wxButton *m_minus;
    wxPanel *m_parent;
    int count;

};

class RightPanel : public wxPanel
{
public:
    RightPanel(wxPanel *parent);

    void OnSetText(wxCommandEvent &amp; event);

    wxStaticText *m_text;

};

const int ID_PLUS = 101;
const int ID_MINUS = 102;
</pre>

<div class="codehead">Panels.cpp</div>
<pre class="code">
#include &lt;wx/stattext.h&gt;
#include "Communicate.h"

LeftPanel::LeftPanel(wxPanel * parent)
       : wxPanel(parent, -1, wxPoint(-1, -1), wxSize(-1, -1), wxBORDER_SUNKEN)
{
  count = 0;
  m_parent = parent;
  m_plus = new wxButton(this, ID_PLUS, wxT("+"), 
      wxPoint(10, 10));
  m_minus = new wxButton(this, ID_MINUS, wxT("-"), 
      wxPoint(10, 60));
  Connect(ID_PLUS, wxEVT_COMMAND_BUTTON_CLICKED, 
      wxCommandEventHandler(LeftPanel::OnPlus));
  Connect(ID_MINUS, wxEVT_COMMAND_BUTTON_CLICKED, 
      wxCommandEventHandler(LeftPanel::OnMinus));
}

void LeftPanel::OnPlus(wxCommandEvent &amp; WXUNUSED(event))
{
  count++;

  Communicate *comm = (Communicate *) m_parent->GetParent();
  comm->m_rp->m_text->SetLabel(wxString::Format(wxT("%d"), count));
}

void LeftPanel::OnMinus(wxCommandEvent &amp; WXUNUSED(event))
{
  count--;

  Communicate *comm = (Communicate *) m_parent->GetParent();
  comm->m_rp->m_text->SetLabel(wxString::Format(wxT("%d"), count));
}


RightPanel::RightPanel(wxPanel * parent)
       : wxPanel(parent, wxID_ANY, wxDefaultPosition, 
         wxSize(270, 150), wxBORDER_SUNKEN)
{
    m_text = new wxStaticText(this, -1, wxT("0"), wxPoint(40, 60));
}
</pre>

<div class="codehead">Communicate.h</div>
<pre class="code">
#include "Panels.h"
#include &lt;wx/wxprec.h&gt;


class Communicate : public wxFrame
{
public:
    Communicate(const wxString&amp; title);


    LeftPanel *m_lp;
    RightPanel *m_rp;
    wxPanel *m_parent;

};
</pre>


<div class="codehead">Communicate.cpp</div>
<pre class="code">
#include "Communicate.h"

Communicate::Communicate(const wxString&amp; title)
       : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(290, 150))
{
  m_parent = new wxPanel(this, wxID_ANY);

  wxBoxSizer *hbox = new wxBoxSizer(wxHORIZONTAL);

  m_lp = new LeftPanel(m_parent);
  m_rp = new RightPanel(m_parent);

  hbox->Add(m_lp, 1, wxEXPAND | wxALL, 5);
  hbox->Add(m_rp, 1, wxEXPAND | wxALL, 5);

  m_parent->SetSizer(hbox);

  this->Centre();
}
</pre>

<div class="codehead">main.h</div>
<pre class="code">
#include &lt;wx/wx.h&gt;

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};
</pre>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "main.h"
#include "Communicate.h"

IMPLEMENT_APP(MyApp)

bool MyApp::OnInit()
{

    Communicate *communicate = new Communicate(wxT("Widgets communicate"));
    communicate->Show(true);

    return true;
}
</pre>

<p>
In our example we have two panels. A left and right panel. The left panel has 
two buttons. The right panel has one static text. The buttons change the number 
displayed in the static text. The question is, how do we grab the pointer to 
the static text?
</p>

<pre class="explanation">
m_parent = parent;
</pre>

<p>
Here we save the pointer to the parent widget of the LeftPanel. It is a wxPanel widget.
</p>

<pre class="explanation">
Communicate *comm = (Communicate *) m_parent->GetParent();
comm->m_rp->m_text->SetLabel(wxString::Format(wxT("%d"), count));
</pre>

<p>
These two lines are the most important lines of the example. It is shown, how we 
get access to the static text widget, which
is placed on a different panel. First we get the parent of the both left and right
 panels. This parent widget has a pointer to the right panel. And the right panel 
has a pointer to the static text. 
</p>

<img src="/img/gui/wxwidgets/wcommunicate.png" alt="Widgets communicate">
<div class="figure">Figure: Widgets communicate</div>

<p>
In this part of the wxWidgets tutorial, we have created some simple programs.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br> 


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 19, 2007  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
